<template>
  <div>
    <os-table border stripe :selected.sync="selected" :data="data" :columns="columns" :btn="btn" :form="form" autoHeight size="small">
      <span slot="aaa">dfsdfsd</span>
      <os-dialog></os-dialog>
    </os-table>
  </div>
</template>
<script>
import OsTable from '../../components/OsTable.vue'
export default {
  components: { OsTable },
  data () {
    return {
      aaa: 1,
      data: [],
      selected: [],
      columns: [
        { type: 'selection', label: '序号' },
        {
          label: 'ID',
          prop: 'id',
          sortable: 'custom',
          children: [
            { label: '二级表头1', prop: 'p21' },
            { label: '二级表头2', prop: 'p22' }
          ]
        },
        { label: '权限字段', prop: 'p1' },
        { label: '默认隐藏', prop: 'p2' },
        {
          label: '名称',
          prop: 'name',
          filters: true,
          renderCell: (data) => {
            return <div>name: {data.cellValue}</div>
          }
        }
      ],
      form: {
        rule: [
          {
            type: 'Input',
            title: '名称',
            field: 'abcCode'
          },
          { type: 'el-button', field: 'search', props: { type: 'primary' }, children: ['查询'], emit: ['click'] },
          { type: 'el-button', field: 'clear', props: { type: 'primary' }, children: ['清空'], emit: ['click'] }
        ]
      },
      form2: {
        rule: [
          {
            type: 'Input',
            title: '名称2',
            field: 'abcCode'
          },
          { type: 'el-button', field: 'search', props: { type: 'primary' }, children: ['查询'], emit: ['click'] },
          { type: 'el-button', field: 'clear', props: { type: 'primary' }, children: ['清空'], emit: ['click'] }
        ]
      },
      btn: [
        { slot: 'aaa' },
        { text: '弹窗', cb: this.dialog },
        {
          text: '新增',
          // loading: true,
          cb: (data) => {
            this.data.push({ id: Math.random(), name: Math.random() })
          }
        }
      ]
    }
  },
  mounted () {
    setTimeout(() => {
      this.data = Array.from({ length: 38 }, (v, k) => ({ id: k, name: 'name' + k }))
    }, 2000)
  },
  methods: {
    dialog () {
      const dialog = this.$utils.dialog('标题', <os-table columns={this.columns} form={this.form2} border stripe size="small" />, {
        btn: [{
          text: '确定',
          disabled: () => {
            dialog.disabled(true)
          }
        }]
      })
    }
  }
}
</script>
